<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>

<body>
    <div class="nav">网页版五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">匹配对战</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        //建立websocket长连接的URL：
        var ws_url = "ws://" + location.host + "/hall";  //请求建立的是游戏大厅长连接
        var ws_hdl = null;  //客户端websocket长连接句柄

        //当前页面被关闭之后的处理函数: 关闭当前页面的websocket长连接
        window.onbeforeunload = function () {
            ws_hdl.close();
        }

        // //按钮有两个状态：没有进行匹配的状态，正在匹配中的状态
        var button_flag = "stop";
        // //点击按钮的事件处理：
        var be = document.getElementById("match-button");
        be.onclick = function () {
            if (button_flag == "stop") {
                //1.没有进行匹配的状态下点击按钮,发送对战匹配请求
                var req_json = {
                    optype: "match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
            else {
                //2.正在匹配的情况下点击按钮，发送对战匹配请求
                var req_json = {
                    optype: "match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }

        }

        //获取用户信息
        function get_user_info() {
            //异步发送该请求：不需要用户点击任何地方,加载大厅后自动异步发送该请求
            $.ajax({
                url: "/info", //注意这里的名字需要和服务器的 http_callback函数内的请求路由派发一致！
                type: "get",

                success: function (res) {
                    var info_html = "<p>" + "用户：" + res.username + "  积分：" + res.score +
                        "</br>" + " 比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");

                    screen_div.innerHTML = info_html; //表示内嵌一个页面

                    //定义客户端的WebSocket长连接对象
                    //客户端浏览器会自动向指定服务器发送websocket长连接建立请求:
                    ws_hdl = new WebSocket(ws_url);

                    ws_hdl.onopen = ws_opopen;  //与服务器websocket长连接建立成功之后的回调处理
                    ws_hdl.onclose = ws_onclose; //与服务器websocket长连接关闭之后的回调处理
                    ws_hdl.onmessage = ws_onmessage; //与服务器长连接通信处理
                    ws_hdl.onerror = ws_onerror;

                },
                //http请求出错,返回登录界面
                error: function (xhr) {
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }
        function ws_opopen() {
            console.log("websocket opopen");
        }
        function ws_onclose() {
            console.log("websocket onclose")
        }
        function ws_onerror() {
            console.log("websocket onerror");
        }


        //最重要, 服务端与客户端在游戏大厅和游戏房间中进行长连接通信
        //所有的服务器的websocket连接的响应都在这里处理
        function ws_onmessage(evt) {
            var resp = JSON.parse(evt.data); //将响应报文反序列化得到JSON格式的resp
            if (resp.result == false) { //请求失败 
                alert(resp.reason);
                //直接回到登录页面
                location.replace("/login.html");
            }

            //请求成功:

            //1.接收服务器给客户端响应大厅长连接建立成功信息
            if (resp["optype"] == "hall_ready") {
                return;
            }
            //2. 游戏大厅的匹配和取消匹配的应答报文
            else if (resp["optype"] == "match_start") {
                console.log("玩家已经加入到匹配队列");
                button_flag = "start";// 修改匹配状态
                be.innerHTML = "正在为你匹配玩家,点击可取消匹配";
                return;
            }
            else if (resp["optype"] == "match_stop") {
                console.log("玩家已经从匹配队列中退出")
                button_flag = "stop";// 修改匹配状态
                be.innerHTML = "匹配对战"; //取消匹配之后,按钮内的文字就变成了最初的"匹配对战"
                return;
            }
            //3.匹配成功后服务器发送来的响应报文
            else if (resp["optype"] == "match_success") {
                location.replace("/game_room.html");
                return;
            }
            else {
                alert("未知响应类型");
            }
        }
        get_user_info();
    </script>
</body>

</html>